
<template>
    <view class="content">
			<view class="plist">
				<scroll-view scroll-x="true" class="plists">
					<view class="txt" :class="cur==0?'actives':''" @tap="swidths(0)">全部({{detail.evaluate_list_count}})</view>
					<view class="txt" :class="cur==1?'actives':''" @tap="swidths(1)">最新</view>
					<view class="txt" :class="cur==2?'actives':''" @tap="swidths(2)">好评({{detail.evaluate_list_count_hao}})</view>
					<view class="txt" :class="cur==3?'actives':''" @tap="swidths(3)">中评({{detail.evaluate_list_count_zhong}})</view>
					<view class="txt" :class="cur==4?'actives':''" @tap="swidths(4)">差评({{detail.evaluate_list_count_cha}})</view>
					<view class="txt" :class="cur==5?'actives':''" @tap="swidths(5)">有图({{detail.evaluate_list_count_tu}})</view>
				</scroll-view>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="txt1">
					<view>
						<image :src="item.user.pic?imgoss+item.user.pic:'/static/mrimg.png'" mode="aspectFill" class="mrimg"></image>
						<span>{{item.user.name}}</span>
						<view>
							<u-rate :count="count" :disabled="true" v-model="item.number"></u-rate>
						</view>
					</view>
					<view>{{item.create_time}}</view>
				</view>
				<view class="txt2">{{item.info}}</view>
				<view class="listimg">
					<view v-if="item.video">
						<video :src="imgoss+item.video"></video>
					</view>
					<view mode="aspectFill" v-if="item.pic.length>0" v-for="(item1,index1) in item.pic" :key="index1">
						<image :src="imgoss+item1" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="morder">没有更多数据</view>
    </view>
</template>

<script>
const app = getApp();
export default {
	components: {
		
	},
    data() {
        return {
			imgoss: app.globalData.imgoss,
            id: 0,
			cur:0,
			img_src: app.globalData.img_src,
			img_url: app.globalData.img_urls,
			count: 5,
			value: 2,
			list:[],
			detail:''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.id = options.id
		this.IndexshopDes()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		swidths(cur){
			this.cur = cur
			this.IndexshopDes()
		},
		IndexshopDes(){
			const that =this;
			app.globalData.api.request('Index/goodsEvaluate', {
				goods_id:this.id,
				type:this.cur
				}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					that.list = res.data.evaluate_list;
					that.detail = res.data
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
	}
};
</script>
<style>
	.actives{
		border: 1px solid #8665AF !important;
	}
	.listimg>view{
		width: 157.5rpx;
		height: 157.5rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		position: relative;
		float: left;
	}
	.listimg>view:nth-child(4n){
		margin-right: 0px;
	}
	.listimg>view>image,.listimg>view>video{
		width: 157.5rpx;
		height: 157.5rpx;
	}
	.listimg{
		width: 100%;
		height: auto;
		display: table;
	}
	.txt2{
		width: 100%;
		height: auto;
		display: table;
		padding: 20rpx 0px;
		color: rgb(16,16,16);
		font-size: 24rpx;
		text-align: left;
		padding-bottom: 0px;
		font-family: SourceHanSansSC-regular;
	}
	.txt1{
		width: 100%;
		height: 80rpx;
	}
	.txt1>view:nth-child(1){
		width: auto;
		height: 80rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: rgb(16,16,16);
		font-size: 24rpx;
		text-align: left;
		float: left;
		font-family: SourceHanSansSC-medium;
	}
	.txt1>view:nth-child(2){
		width: auto;
		height: 80rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: rgba(16,16,16,0.5);
		font-size: 24rpx;
		text-align: left;
		float: right;
		font-family: SourceHanSansSC-medium;
	}
	.txt1>view:nth-child(1)>image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 5px;
	}
	.list{
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	page{
		background-color: rgba(245,245,245,1);
	}
	.txt{
		width: auto;
		height: 28px;
		padding: 0px 25rpx;
		border-radius: 50px;
		display: inline-flex;
		line-height: 26px;
		background-color: rgba(238,232,246,1);
		color: rgba(19,18,18,1);
		font-size: 22rpx;
		text-align: center;
		font-family: Roboto;
		box-sizing: border-box;
		border: 1px solid rgba(238,232,246,1);
		margin-right: 30rpx;
	}
	.plists{
		width: 690rpx;
		height: 28px;
		display: inline-flex;
		white-space: nowrap;
	}
	.plist{
		width: 100%;
		height: auto;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left:0px;
		z-index: 100;
		box-sizing: border-box;
		padding: 10px 30rpx;
	}
	.content{
		width: 100%;
		height: auto;
		padding-top: 48px;
	}
</style>
